<template>
  <div>
    App.vue
    <!-- 以.vue结尾的文件 都称为组件 -->
    <!-- vue文件的结构 划分成三个部分 -->
    <!-- template 模板 写html元素 页面结构 -->
    <!-- <div>========Demo组件=========</div>
    <Demo />

    <div>-------Demo1组件--------</div>
    <Demo1 />

    <div>-------Demo2组件--------</div>
    <Demo2 />

    <div>-------Demo4组件--------</div>
    <Demo4 /> -->

    <div>-------Demo5组件表单绑定--------</div>
    <Demo5 />
    
    <div>-------Demo6组件表单绑定--------</div>
    <Demo6 v-if="flag" />
    <button @click="flag = !flag">改变flag</button>
    
    <div>-------Demo7组件库使用--------</div>
    <Demo7 />
  </div>
</template>

<script setup>
// 处理页面行为
// 引入demo01组件
// import Demo from '@/views/demo.vue'
// import Demo1 from '@/views/demo1.vue'
// import Demo2 from '@/views/demo2.vue'
// import Demo4 from '@/views/demo4.vue'
import Demo5 from '@/views/demo5.vue'
import Demo6 from '@/views/demo6.vue'
import Demo7 from '@/views/demo7.vue'

import {ref} from 'vue'
const flag = ref(true)

</script>

<style scoped>
/* 样式 */
/* div {
  color: red;
} */
</style>